<template>
  <div class="person_info">
    <div class="btn_wrap">
      <div>
        <el-button type="primary" @click="sendMes">群发通知</el-button>
      </div>
      <div>
        <el-button type="primary" @click="toadd">添加员工</el-button>
        <el-button type="primary" @click="toOpenImport">导入员工</el-button>
        <el-button type="primary" @click="exportExcel">导出员工</el-button>
      </div>
    </div>
    <div style="margin-top:20px;width: 100%;">
      <el-table
        ref="mypersonTable"
        :data="list"
        row-key="id"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="55" type="selection" />
        <el-table-column label="头像">
          <template slot-scope="scope">
            <div>
              <img v-if="scope.row.staffPhoto" style="width:40px;height:40px;" :src="scope.row.staffPhoto" alt="">
              <div v-else class="avator">{{ scope.row.username[2] }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="username" />
        <el-table-column label="手机号" prop="mobile" />
        <el-table-column label="工号" prop="workNumber" />
        <el-table-column label="聘用形式">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.formOfEmployment===1">正式</span>
              <span v-else>非正式</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="部门" prop="departmentName" />
        <el-table-column label="入职时间" prop="timeOfEntry" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-link type="primary" @click="toDetail(scope.row.id)">查看</el-link>
              <el-link type="primary" style="margin:0 10px;" @click="toOpenRole(scope.row.id)">角色</el-link>
              <el-link type="primary" @click="toDel(scope.row.id)">删除</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="display: flex;justify-content: flex-end; margin-right: 50px;">
      <el-pagination
        :page-sizes="[3,5,10]"
        layout="sizes,total,prev, pager, next"
        :total="total"
        :page-size="5"
        @current-change="pageChange"
        @size-change="sizePage"
      />
    </div>
    <!--  导入弹出层-->
    <importUser ref="importUserTem" />

    <!-- 分配角色 -->
    <el-dialog title="分配角色" width="50%" :visible.sync="roleFlag">
      <el-checkbox-group v-model="cklist">
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
      <span slot="footer">
        <el-button type="primary" @click="toSendRole">确定 </el-button>
        <el-button type="primary" @click="roleFlag = false"> 取消 </el-button>
      </span>
    </el-dialog>
    <!-- 发送消息 -->
    <sendMassge
      ref="sendMassgeTem"
      :user-names="userNames"
      :user-ids="userIds"
      label-width="100px"
      @closeTag="closeNames"
      @clearIds="clearAll"
    />
  </div>
</template>
<script>
// excel导出功能 npm install xlsx --save

// 导入 需要 先下载 导入模版
// 下载模版接口 返回的blob  需要用file-saver保存 成文件
// 用模版书写 完成导入接口 导入接口 发送formdata类型的文件数据
import * as XLSX from 'xlsx'
import importUser from './importUser.vue'
import { getRoleList, toRoleApi, getUserInfo, delUserApi } from '@/api/personnel'
import sendMassge from './sendMessage.vue'
export default {
  components: { importUser, sendMassge },
  props: {
    total: {
      type: Number,
      default: 0
    },
    list: {
      type: Array,
      default: () => []
    }

  },
  data() {
    return {
      roleFlag: false, // 分配权限的弹出层
      cklist: [], // 选择的角色id集合
      roleList: [], // 角色列表数据
      personId: '', // 正在分配角色的员工id
      userIds: [], // 群发消息的员工id
      userNames: []// 群发消息的名字
    }
  },

  methods: {
    clearAll() { // 清空所有内容
      this.userIds = []
      this.userNames = []
      this.$refs.mypersonTable.clearSelection()// 清空选择
    },
    closeNames(tag) { // 删掉发送的名字
      this.userNames = this.userNames.filter(item => item.username !== tag.username)
      // 删掉发送的id
      this.userIds = this.userIds.filter(item => item.id !== tag.id)
    },
    handleSelectionChange(selection) { // 复选框的change事件 收集员工的ids
      console.log(selection, '选择的员工')
      this.userIds = selection.map(item => item.id)
      this.userNames = selection
    },
    sendMes() {
      // 打开群发消息
      if (this.userIds.length === 0) {
        this.$message.error('请选择要发送消息的员工')
      } else {
        this.$refs.sendMassgeTem.mesFlag = true
      }
    },
    async toDel(id) { // 删除
      const res = await delUserApi(id)
      console.log(res)
      this.$message.success('删除成功')
      this.$parent.getList() // 调用父组件的列表方法
    },
    async toSendRole() { // 分配角色接口
      console.log(this.cklist, '-----------')
      const res = await toRoleApi({
        id: this.personId,
        roleIds: this.cklist
      })
      this.$message.success('分配角色成功')
      console.log(res)
      this.roleFlag = false
      this.personId = ''
      this.cklist = []
    },
    async toOpenRole(id) { // 打开角色分配
      this.getRole()// 获取角色列表
      // 获取员工详情
      const res = await getUserInfo(id)
      this.cklist = res.data.roleIds// 获取员工角色分配过的ids  回显
      this.personId = id // 员工id
      this.roleFlag = true
    },
    async getRole() { // 获取角色列表
      const res = await getRoleList()
      console.log(res)
      this.roleList = res.data
    },
    pageChange(page) { // 分页事件
      this.$emit('sendPage', page) // 子传父 当前页码
    },
    sizePage(size) { // 每页的条数
      this.$emit('sendSize', size)
    },
    exportExcel() {
      // 新建一个工作簿
      const workbook = XLSX.utils.book_new()
      // 新建一个工作表
      // XLSX.utils.json_to_sheet(表格的数据)
      const worksheet = XLSX.utils.json_to_sheet(this.list)
      // XLSX.utils.book_append_sheet 将表格添加到工作簿
      XLSX.utils.book_append_sheet(workbook, worksheet, '员工表')
      // 导出文件writeFile
      XLSX.writeFile(workbook, '员工信息表.xlsx')
    },
    toOpenImport() { // 打开导入模版
      // ref或子组件  控制子组件的数据
      this.$refs.importUserTem.importFlag = true
    },
    toadd() { // 跳转详情页
      this.$router.push('/person/detail')
    },
    toDetail(id) { // 点击查看 跳转详情 进行回显和编辑
      this.$router.push({
        name: 'perdetail',
        query: {
          id: id
        }
      })
    }
  }
}
</script>
<style lang="scss">
.person_info{
  padding:30px;
  box-sizing: border-box;
}
 .btn_wrap{
  display: flex;
  width: 100%;
  justify-content:space-between ;
 }
 .avator{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(4,201,190);
  color:white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
 }
</style>
